<template>
  <div class="card">
    <div slot="header" class="clearfix">
      <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">博客首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">个人详情页</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="mid">
      <img  class="person-img" :src="this.userList.userPic"/>
      <div class="container">
        <div class="info">
              <p class="name">{{userList.name}}</p>
              <p class="introduction">{{userList.hobby}}</p>
              <p class="account">{{userList.email}}</p>
        </div>
        <div class="data">
              <div class="followers">
                  <img class="followers-icon" src="@/assets/mime/followers.png"/>
                  <div class="followers-info">
                      <p class="info-name">关注者</p>
                      <p class="info-number">14</p>
                  </div>
              </div>
              <div class="visits">
                  <img class="visits-icon" src="@/assets/mime/visits.png"/>
                  <div class="visits-info">
                    <p class="info-name">访问数量</p>
                      <p class="info-number">102</p>
                  </div>
              </div>
              <div class="articles">
                  <img class="articles-icon" src="@/assets/mime/articles.png"/>
                  <div class="articles-info">
                      <p class="info-name">柠文总数</p>
                      <p class="info-number">6</p>
                  </div>
              </div>
        </div>
      </div>
    </div>
    <div class="bottom">
          <el-button type="success" plain @click="register">! 修改信息</el-button>
          <el-button type="success" plain @click="register">+ 新建文章</el-button>
        </div>
      <div class="info">
        <div class="info-left">
          <div class="left-top">
            <div class="top-title">
              <p class="grade">清柠等级</p>
              <img class="grade-icon" src="@/assets/mime/grade.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="menu">
                    <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                    <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="top-data">总积分 463　等级 3</div>
          </div>
          <div class="left-bottom">
            <div class="bottom-title">
              <p class="column">个人专栏</p>
              <img class="column-icon" src="@/assets/mime/column.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="menu">
                    <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                    <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="bottom-data">生活 3篇</div>
          </div>
        </div>
        <div class="info-right">
          <div class="right-title">
              <p class="column">个人成就</p>
              <img class="column-icon" src="@/assets/mime/achieve.png"/>
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <el-dropdown-menu>
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                </el-dropdown-menu>
                </el-dropdown>
          </div>
          <div class="right-info">
              <div class="likes">
                <div class="likes-back">
                  <img class="likes-icon" src="@/assets/mime/likes.png"/>
                </div>
                <div class="likes-info">
                    <p class="info-name">获赞数量</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
              <div class="collect">
                <div class="collect-back">
                  <img class="collect-icon" src="@/assets/mime/collect.png"/>
                </div>
                <div class="collect-info">
                    <p class="info-name">获赞数量</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
              <div class="recommend">
                <div class="recommend-back">
                  <img class="recommend-icon" src="@/assets/mime/recommend.png"/>
                </div>
                <div class="recommend-info">
                    <p class="info-name">获得推荐</p>
                    <p class="info-number">654次</p>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: '',
  // 接收父组件传入的参数
  props: ['userList'],
  // 注册组件
  components: {
  },
  // 数据
  data () {
    return {
      // userList: {
      //   birth: "",
      //   createTime: "",
      //   email: "",
      //   hobby: "",
      //   id: "",
      //   institute: "",
      //   name: "",
      //   password: "",
      //   phoneNumber: "",
      //   sex: "",
      //   specialty: "",
      //   totalTime: null,
      //   userPic: null,
      // }
    }
  },
  // 属性值计算
  computed: {},
  // 数据侦听
  watch: {},
  // vue实例被创建时
  created() {
    // this.loadUser()

    // this.bg=require(this.userList.userPic)
  },
  // vue实例被挂载至dom上时
  mounted () {},
  // 实例方法
  methods: {
    // loadUser() {
    //   getUserProfile().then(res => {
    //     this.userList = res.data.data
    //     console.log(this.userList)
    //   });
    // },

    //这里的写法有问题，需要注意
    // async loadUser() {
    //   const { data: res } = await getUserProfile()
    //         this.userList = res.data.data
    //         console.log(this.userList);
    // },
  },
  // keep-alive之后页面会缓存，不会执行created(),和mounted(),但是会执行activated()
  activated () {},
  // 退出的生命周期钩子
  deactivated () {},
  // 销毁
  destroyed () {},
}
</script>
<style lang='less' scoped>
.card {
  height: 58vh;
  width: 32vw;
  background: transparent;
  position: relative;
  .clearfix {
    position: absolute;
    top: 2vh;
    height: 0.2vh;
    width: 15vw;
  }
  .mid {
    height: 40vh;
    width: 32vw;
    position: absolute;
    top: 6vh;
    .person-img{
      height: 15.1vh;
      width: 15.1vh;
      position: absolute;
      top: -1vh;
      left: 11vw;
      border-radius: 50%;
      z-index: 1;
    }
    .container{
      height: 37vh;
      width: 32vw;
      position: absolute;
      top: 3vh;
      border-radius: 15px;
      background: transparent;
      box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 25%);
      .info {
        position: absolute;
        top: 15vh;
        left: 7vw;
        height: 11vh;
        width: 17.2vw;
          .name {
              font-size: 24px;
              font-weight: 400;
              color: rgba(13, 128, 120, 1);
              text-align: center;
              margin: 1vh 0;
          }
          .introduction {
            font-size: 14px;
            font-weight: 400;
            color: #505050;
            text-align: center;
            margin: 0vh 0;
          }
          .account {
              font-size: 18px;
              font-weight: 400;
              color: rgba(183, 183, 183, 1);
              text-align: center;
              margin: 1vh 0;
          }
          .details {
              width: 185px;
              height: 50px;
              border-radius: 15px;
              font-size: 20px;
              background-color: #0d8078;
              margin: 0 auto;
              margin: 2.5vh 2vw 0vw 4vh;
          }
      }
      .data {
          position: absolute;
          top: 26vh;
          height: 11vh;
          width: 32vw;
          display:flex;
          justify-content:space-around;
          align-items: center;
          .followers {
            height: 7.6vh;
            width: 12.6vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 1vw;
              .followers-icon {
                height: 3vh;
                width: 3vh;
              }
              .followers-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  float: left;
                  .info-number {
                    font-size: 16px;
                    font-weight: 400;
                    color: #00baad;
                    margin: 0vh 0vw 3vh -2.5vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: -8vh 0vw 0vh -3vw;
                  }
              }
          }
          .visits {
              height: 11.6vh;
              width: 13.6vw;
              display:flex;
              justify-content:space-around;
              align-items: center;
              margin-left: -1vw;
              .visits-icon {
                height: 3vh;
                width: 3vh;
              }
              .visits-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  float: left;
                  .info-number {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 186, 173, 1);
                      margin: 0vh 0vw 0vh -2vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: -5vh 0vw -0vh -3vw;
                  }
              }
          }
          .articles {
              height: 11.6vh;
              width: 14.6vw;
              display:flex;
              justify-content:space-around;
              align-items: center;
              margin-right: 1vw;
              .articles-icon {
                height: 3vh;
                width: 3vh;
              }
              .articles-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  // float: left;
                  .info-number {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 186, 173, 1);
                      margin: 0vh 0vw -5vh -3.5vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: 0vh 0vw 0vh -4vw;
                  }
              }
          }
      }
    }
  }
  .bottom {
    width: 32vw;
    height: 7.2vh;
    background: pink;
    position: absolute;
    bottom: 2.5vh;
    left: 8vw;
    .el-button--success.is-plain {
          color: #fff;
          border-radius: 14px;
          background: rgba(67, 207, 124, 1);
          margin-right: 1vw;
      }
  }
}

</style>